import QtQuick 2.0

Rectangle {

    signal sigDebugStopped()
    signal sigDebugStarted()
    signal sigDebugPaused()
    signal sigExit()
    signal sigExitDirectly()

    width: 120

    Rectangle {
        anchors.centerIn: parent
        width: 100
        height: 180
        color: "lightgray"
        radius: 20

        Column {
            anchors.centerIn: parent
            Rectangle {
                width: 80
                height: 80
                color: "transparent"
                Image {
                    id: btnPlay
                    anchors.centerIn: parent
                    source: "qrc:/imgs/play.png"
                    width: 64
                    height: 64
                    Behavior on opacity {PropertyAnimation{duration:200}}
                    Behavior on scale {PropertyAnimation{duration:200}}
                }
                Image {
                    id: btnPause
                    opacity: 0
                    anchors.centerIn: parent
                    source: "qrc:/imgs/pause.png"
                    width: 64
                    height: 64
                    Behavior on opacity {PropertyAnimation{duration:200}}
                    Behavior on scale {PropertyAnimation{duration:200}}
                }
                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    onEntered: {
                        btnPause.opacity == 1 ? btnPause.scale = 1.2 : btnPlay.scale = 1.2
                    }
                    onExited: {
                        btnPause.opacity == 1 ? btnPause.scale = 1.0 : btnPlay.scale = 1.0
                    }
                    onClicked: {
                        if (btnPlay.opacity === 1) {
                            btnPlay.opacity = 0
                            btnPause.opacity = 1
                            emit: sigDebugStarted()
                        } else {
                            btnPlay.opacity = 1
                            btnPause.opacity = 0
                            emit: sigDebugPaused()
                        }
                    }
                }
            }

            Rectangle {
                width: 80
                height: 80
                color: "transparent"
                Image {
                    id: btnStop
                    anchors.centerIn: parent
                    source: "qrc:/imgs/stop.png"
                    width: 56
                    height: 56
                    Behavior on scale {PropertyAnimation{duration:200}}
                }
                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    onEntered:  {
                        btnStop.scale = 1.2
                    }
                    onExited: {btnStop.scale = 1.0;}
                    onPressed: btnStop.scale = 1.0
                    onReleased: btnStop.scale = 1.2
                    onClicked: {
                        btnPlay.opacity = 1
                        btnPause.opacity = 0
                        emit: sigDebugStopped()
                    }
                }
            }

        }
    }

    function setBtnPlay() {
        btnPlay.opacity = 1
        btnPause.opacity = 0
    }

}

